<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>jQuery粘性滑块导航（响应式）</title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<section class="et-hero-tabs">
			<h1>粘性滑块导航</h1>
			<h3>滑动内容与粘性选项卡导航</h3>
			<div class="et-hero-tabs-container"> <a class="et-hero-tab" href="#tab-es6">ES6</a> <a class="et-hero-tab" href="#tab-flexbox">Flexbox</a>
				<a class="et-hero-tab" href="#tab-react">React</a> <a class="et-hero-tab" href="#tab-angular">Angular</a> <a class="et-hero-tab"
				 href="#tab-other">Other</a> <span class="et-hero-tab-slider"></span> </div>
		</section>

		<main class="et-main">
			<section class="et-slide" id="tab-es6">
				<h1>ES6</h1>
				<h3>something about es6</h3>
			</section>
			<section class="et-slide" id="tab-flexbox">
				<h1>Flexbox</h1>
				<h3>something about flexbox</h3>
			</section>
			<section class="et-slide" id="tab-react">
				<h1>React</h1>
				<h3>something about react</h3>
			</section>
			<section class="et-slide" id="tab-angular">
				<h1>Angular</h1>
				<h3>something about angular</h3>
			</section>
			<section class="et-slide" id="tab-other">
				<h1>Other</h1>
				<h3>something about other</h3>
			</section>
		</main>
		<script src="jquery-3.4.1.js"></script>
		</script>
		<script src="script.js"></script>
	</body>
</html>
